<template>
  <view class="coupon-rules-page">
    <!-- 导航栏 -->
    <NavBar title="优惠券规则" />

    <!-- 规则内容 -->
    <view class="rules-content">
      <!-- 基本规则 -->
      <view class="rules-section">
        <view class="section-title">基本规则</view>
        <view class="section-content">
          <view class="rule-item">1. 优惠券仅限在有效期内使用，过期作废，不予退还或延期。</view>
          <view class="rule-item">2. 每个订单仅限使用一张优惠券，不可叠加使用。</view>
          <view class="rule-item">3. 优惠券不可兑换现金，不设找零。</view>
          <view class="rule-item">4. 部分特殊商品可能不支持使用优惠券，详情请见商品页面说明。</view>
          <view class="rule-item">5. 优惠券一经使用，不可退回。</view>
        </view>
      </view>

      <!-- 优惠券类型 -->
      <view class="rules-section">
        <view class="section-title">优惠券类型</view>
        <view class="section-content">
          <view class="type-item">
            <view class="type-name">满减券</view>
            <view class="type-desc">订单金额满足条件时可抵扣固定金额，如满100减10元。</view>
          </view>
          <view class="type-item">
            <view class="type-name">折扣券</view>
            <view class="type-desc">订单金额满足条件时可按比例折扣，如满100打8折。</view>
          </view>
          <view class="type-item">
            <view class="type-name">无门槛券</view>
            <view class="type-desc">无需满足订单金额条件，直接抵扣固定金额。</view>
          </view>
          <view class="type-item">
            <view class="type-name">品类券</view>
            <view class="type-desc">仅限特定品类商品使用的优惠券。</view>
          </view>
        </view>
      </view>

      <!-- 获取方式 -->
      <view class="rules-section">
        <view class="section-title">获取方式</view>
        <view class="section-content">
          <view class="way-item">
            <view class="way-name">领券中心</view>
            <view class="way-desc">在"领券中心"页面领取各类优惠券。</view>
          </view>
          <view class="way-item">
            <view class="way-name">新用户福利</view>
            <view class="way-desc">新用户注册后自动发放新人专享优惠券。</view>
          </view>
          <view class="way-item">
            <view class="way-name">活动赠送</view>
            <view class="way-desc">参与平台活动可获得相应优惠券奖励。</view>
          </view>
          <view class="way-item">
            <view class="way-name">优惠券兑换</view>
            <view class="way-desc">通过兑换码兑换特定优惠券。</view>
          </view>
        </view>
      </view>

      <!-- 常见问题 -->
      <view class="rules-section">
        <view class="section-title">常见问题</view>
        <view class="section-content">
          <view class="faq-item" v-for="(item, index) in faqList" :key="index">
            <view class="faq-question" @click="toggleFaq(index)">
              <text>{{ item.question }}</text>
              <ArrowUp v-if="expandedFaq === index" size="14" />
              <ArrowDown v-else size="14" />
            </view>
            <view class="faq-answer" v-show="expandedFaq === index">
              {{ item.answer }}
            </view>
          </view>
        </view>
      </view>

      <!-- 联系客服 -->
      <view class="rules-section contact-section">
        <view class="contact-info">
          <view class="contact-text">如有其他问题，请联系客服</view>
          <nut-button type="primary" size="small" @click="contactService">联系客服</nut-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Taro from '@tarojs/taro'
import NavBar from '@/components/NavBar/index.vue'
import { ArrowUp, ArrowDown } from '@nutui/icons-vue-taro'

// 常见问题列表
const faqList = [
  {
    question: '优惠券过期了可以延期使用吗？',
    answer: '优惠券一旦过期将自动失效，不支持延期使用。建议您在有效期内及时使用。'
  },
  {
    question: '为什么我的优惠券无法使用？',
    answer: '可能原因：1. 优惠券已过期；2. 订单金额未达到使用门槛；3. 所购商品不在优惠券使用范围内；4. 优惠券已被使用。'
  },
  {
    question: '下单后取消订单，优惠券会返还吗？',
    answer: '是的，如果您取消订单，已使用的优惠券将自动返还到您的账户中，有效期保持不变。'
  },
  {
    question: '优惠券可以转赠给其他人吗？',
    answer: '目前平台优惠券不支持转赠功能，优惠券仅限领取账户本人使用。'
  },
  {
    question: '如何查看我的优惠券？',
    answer: '在"我的"页面中点击"我的优惠券"即可查看所有优惠券。'
  }
]

// 展开的FAQ项
const expandedFaq = ref(-1)

// 切换FAQ展开状态
const toggleFaq = (index: number) => {
  expandedFaq.value = expandedFaq.value === index ? -1 : index
}

// 联系客服
const contactService = () => {
  // 在小程序环境中使用小程序的客服接口
  if (Taro.getEnv() === Taro.ENV_TYPE.WEAPP) {
    Taro.openCustomerServiceChat({
      extInfo: { url: 'https://work.weixin.qq.com/kfid/kfc123456789' },
      corpId: 'wxxxxxxxxxxxxxxxxx',
      success: () => {}
    })
  } else {
    // 在H5环境下模拟客服行为
    Taro.showToast({
      title: '客服功能开发中',
      icon: 'none'
    })
  }
}
</script>

<style lang="scss" scoped>
.coupon-rules-page {
  min-height: 100vh;
  background-color: #f7f8fa;
  
  .rules-content {
    padding: 10px;
  }
  
  .rules-section {
    margin-bottom: 15px;
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .section-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 12px;
    position: relative;
    padding-left: 10px;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 16px;
      background-color: #fa2c19;
      border-radius: 3px;
    }
  }
  
  .section-content {
    color: #666;
    font-size: 14px;
  }
  
  .rule-item {
    margin-bottom: 8px;
    line-height: 1.5;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .type-item, .way-item {
    margin-bottom: 12px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .type-name, .way-name {
      font-weight: 500;
      color: #333;
      margin-bottom: 4px;
    }
    
    .type-desc, .way-desc {
      font-size: 13px;
      color: #666;
    }
  }
  
  .faq-item {
    margin-bottom: 10px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .faq-question {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      font-weight: 500;
      color: #333;
    }
    
    .faq-answer {
      padding: 8px 0;
      color: #666;
      font-size: 13px;
      line-height: 1.5;
      border-top: 1px solid #f5f5f5;
    }
  }
  
  .contact-section {
    .contact-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .contact-text {
        color: #666;
      }
    }
  }
}
</style>